<template>
  <div class="amount-info">
    <!--营收趋势-->
    <div class="amount-info-item amount-info-item-header">
      <Superscript :title="titleList[0]"></Superscript>

      <AmountWave id="amountWave" class="myWave"
                  :xAxis="amountWave.xAxis"
                  :data0="amountWave.data0"
                  :data1="amountWave.data1"
                  :data2="amountWave.data2">
      </AmountWave>

    </div>

    <!--里程数据-->
    <div class="amount-info-item amount-info-item-two">
      <Superscript :title="titleList[1]"></Superscript>

      <div class="amount-info-item-two-real">
        <div class="amount-info-item-two-temp"></div>
        <div class="amount-info-item-two-real-top">
          <div class="amount-info-item-two-real-top-left"><count id="liChengTotal" :endVal="intervalMileage.intervalMileage" :decimals="3"></count></div>
          <!--<div :class="['amount-info-item-two-real-top-Right', !mileage.up ? 'down-color' : '']"><i :class="['fa', mileage.up ? 'fa-caret-up' : 'fa-caret-down']"></i><Count size="mini" :type="mileage.up ? 'warning' : 'green'" :inlineBlock="true" :endVal="mileage.rate" unit="%" id="liChengPercent"></Count></div>-->
          <div class="amount-info-item-two-real-top-right"><count size="mini" :inlineBlock="true" :endVal="intervalMileage.rate" type="warning" unit="%" id="liChengPercent"></count></div>
        </div>
        <div class="amount-info-item-two-real-bottom">实时里程数</div>
      </div>

      <MileageWave id="mileageWave" class="liChengWave"
                   :xAxis="mileageWave.xAxis"
                   :data0="mileageWave.data0"
                   :data1="mileageWave.data1"
                   :data2="mileageWave.data2">
      </MileageWave>

    </div>
    <!--客流数据-->
    <div class="amount-info-item amount-info-item-three">
      <Superscript :title="titleList[2]"></Superscript>

      <div class="amount-info-item-three-real">
        <div class="amount-info-item-three-temp"></div>
        <div class="amount-info-item-three-real-top">
          <div class="amount-info-item-three-real-top-left"><count id="userTotal" :endVal="averageUserFlow"></count></div>
        </div>
        <div class="amount-info-item-three-real-bottom">七日平均客流量</div>
      </div>

      <PeoFlowWave id="userWave" class="userWave"
                   :xAxis="userWave.xAxis"
                   :data0="userWave.data0"
                   :data1="userWave.data1"
                   :data2="userWave.data2">
      </PeoFlowWave>
    </div>

    <!--车辆报警数据-->
    <div class="amount-info-item amount-info-item-footer">
      <Superscript :title="titleList[3]"></Superscript>

      <div class="amount-info-item-footer-item">
        <img src="http://xm-cdn.oss-cn-hangzhou.aliyuncs.com/img/data-screen/bus_device_icon.png" class="icon" />
        <BoldPie id="myBusPie1"
                 class="bus-pie height100"
                 :data0="myBusLifeData.fault"
                 :data1="myBusLifeData.running"
                 :legend="legendList[0]"
                 :areaColor="areaColorList[0]">
        </BoldPie>
        <BoldPie id="myBusPie2"
                 class="bus-pie height100"
                 :data0="myBusLifeData.vehicleAlarm"
                 :data1="myBusLifeData.normal"
                 :legend="legendList[1]"
                 :areaColor="areaColorList[1]">
        </BoldPie>
        <div class="bus-basis">
          <div class="bus-basis-item"><i class="fa fa-stop red"></i>{{ legendList[0][0] }}</div>
          <div class="bus-basis-item"><i class="fa fa-stop blue"></i>{{ legendList[0][1] }}</div>
          <div class="bus-basis-item"><i class="fa fa-stop dark-blue"></i>{{ legendList[1][0] }}</div>
          <div class="bus-basis-item"><i class="fa fa-stop light-blue"></i>{{ legendList[1][1] }}</div>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
  import { mapActions, mapState} from 'vuex'
  import { Superscript, count, AmountWave, MileageWave, PeoFlowWave, BoldPie } from '../../../components'
  import { arrayTotal } from '../../../utils/public'

  export default {
    components: { Superscript, count, AmountWave, MileageWave, PeoFlowWave, BoldPie },
    data () {
      return {
        titleList: ['营收趋势(7天)', '里程数据(7天)', '客流数据(7天)', '车辆报警汇总'],
        legendList: [['故障车辆', '工作车辆'], ['报警车辆', '正常车辆']],
        areaColorList: [['#f71c6d', '#3d79fe'],['#3521ff', '#3cb5fe']],
      }
    },
    computed: {
      ...mapState(['amountWave', 'mileageWave', 'userWave', 'myBusLifeData', 'intervalMileage']),
      averageUserFlow () {
        let sum = 0
        this.userWave.data2.forEach((item) => {
          sum += item
        })
        return (sum / this.userWave.data2.length).toFixed(0)
      }
    },
    mounted () {
//      this.getAmount()
//      this.getMileage()
//      this.getUserFlow()
//      this.getBusWarn()
//      this.getIntervalMileage()
    },
    methods: {
//      ...mapActions(['getBusWarn', 'getIntervalMileage'])
    }
  }
</script>

<style lang="stylus" scoped>
  @import './index.styl';
</style>
